<template>
  <div>
    <div>
      <el-form :inline="true" :model="suggest" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select v-model="suggest.complaintSuggestType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadSuggest">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--按钮-->
    <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
    <div>
      <el-table
        :data="suggests"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="120"
        >
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column
          label="类型"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.complaintSuggestType }}</template>
        </el-table-column>
        <el-table-column
          label="内容"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.complaintSuggestContent }}</template>
        </el-table-column>
        <el-table-column
          label="创建者名称"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.ownerNickname }}</template>
        </el-table-column>
        <el-table-column
          label="创建者电话"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.ownerPhoneNumber }}</template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="200"
        >
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="图片"
          width="240"
        >
          <template>
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in 3" :key="item">
                <h3 class="medium">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
        >
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        />
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration" />
      <el-pagination
        :current-page.sync="current"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="size"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Suggest',
  data() {
    return {
      options: [{
        value: 'Suggest',
        label: '建议'
      }, {
        value: 'Complaint',
        label: '投诉'
      }],
      value: '',
      current: 1,
      size: 3,
      total: 0,
      suggests: [],
      suggest: {
        index: '',
        complaintSuggestType: '',
        complaintSuggestContent: '',
        ownerNickname: '',
        ownerPhoneNumber: '',
        createTime: '',
        remark: ''
      }
    }
  }, created() {
    this.loadSuggest(this.current, this.size)
  },
  // 显示
  methods: {
         loadSuggest(current, size, suggests) {
            current = this.current
            size = this.size
            suggests = this.suggest
            console.log(suggests)
             // eslint-disable-next-line no-undef
            this.axios({
                url: 'http://localhost:8080/suggests/page?' + this.qs.stringify(suggests),
                menthod: 'get',
                params: {
                current: current,
                size: size
          // eslint-disable-next-line no-undef
        }
      })
        .then(res => {
          console.log(res.data)
          this.suggests = res.data.records
          this.suggests.map(function(val) {
            // eslint-disable-next-line eqeqeq
            if (val.complaintSuggestType == 'Suggest') {
              val.complaintSuggestType = '建议'
            } else {
              val.complaintSuggestType = '投诉'
            }
          })
          this.current = res.data.current
          this.size = res.data.size
          this.total = res.data.total
        })
    },
    handleSizeChange(nowSize) {
      this.size = nowSize
      this.loadSuggest(this.current, this.size)
      console.log(`每页 ${nowSize} 条`)
    },
    handleCurrentChange(nowPage) {
      this.current = nowPage
      this.loadSuggest(this.current, this.size)
      console.log(`当前页: ${nowPage}`)
    },
    loadReset() {
      this.suggest = {
        complaintSuggestType: ''
      }
      this.loadSuggest(this.current, this.size)
    },
    handleExport() {
      // eslint-disable-next-line no-undef
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/suggest/download',
        responseType: 'arraybuffer'
      })
        .then(res => {
          console.log(res)
          // 使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
          var b = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          // 使用URL对象将blob类型的数据生成一个在线下载的链接
          var url = URL.createObjectURL(b)
          // 然后我们使用a标签进行下载
          var link = document.createElement('a')

          // 设置导出的文件名
          link.download = Date.now() + '.xlsx'
          link.href = url
          // 点击获取文件
          link.click();

          (err) => {
            console.log(err)
          }
        })
    }
  }
}
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
